<template>
  <view class="page-form-view" :style="style">
    <uni-forms ref="form" :model="model">
      <view v-show="!validate" class="verifiable-code-view">
        <view class="view-title">{{ $t('login.message.verifyPhone') }}</view>
        <uni-forms-item name="phone">
          <je-input
            v-model:value="model.phone"
            class="je-input-view"
            prefix-icon="fal fa-mobile-alt"
            type="number"
            :placeholder="$t('login.placeholder.phone')"
          />
        </uni-forms-item>
        <uni-forms-item name="captcha">
          <je-input-captcha
            v-model:value="model.captcha"
            class="je-input-view"
            prefix-icon="jeicon jeicon-key"
            type="number"
            :placeholder="$t('login.placeholder.captcha')"
            @timer-click="onTimerClick"
          />
        </uni-forms-item>
        <button class="button-view" type="primary" :loading="loading" @click="onNextClick">
          {{ $t('login.button.next') }}
        </button>
      </view>

      <view v-show="validate" class="setting-password-view">
        <view class="view-title">{{ $t('login.placeholder.password.new') }}</view>
        <uni-forms-item name="newPassword">
          <je-input
            v-model:value="model.newPassword"
            class="je-input-view"
            prefix-icon="fal fa-lock-alt"
            type="password"
            :placeholder="$t('login.placeholder.password.new')"
          />
        </uni-forms-item>
        <uni-forms-item name="confirmPassword">
          <je-input
            v-model:value="model.confirmPassword"
            class="je-input-view"
            prefix-icon="fal fa-lock-alt"
            type="password"
            :placeholder="$t('login.placeholder.password.confirm')"
          />
        </uni-forms-item>
        <view class="password-hint">
          <text>{{ $t('login.message.passwordRules') }} </text>
        </view>
        <button class="button-view" type="primary" :loading="loading" @click="onOkClick">
          {{ $t('login.button.ok') }}
        </button>
      </view>
    </uni-forms>
  </view>
</template>
<script>
  import { usePassword } from './hooks/use-password';
  export default {
    name: 'ForgetPasswordPage',
    options: { styleIsolation: 'shared' },
    setup(props, context) {
      return usePassword({ props, context });
    },
  };
</script>
<style lang="scss">
  @import '../app-login/assets/common.scss';
  @import '../app-login/assets/theme.scss';
  .button-view {
    margin-top: 70px;
  }
  .setting-password-view {
    .button-view {
      margin-top: 36px;
    }
  }
</style>
